<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%--
2017年6月12日 姜延鹏
Created by JiangYanpeng
Date: 2017年6月12日 16:38:45
Version: 1.0
停车位选择页面
--%>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>jquery图像缩放</title>
    <link rel="stylesheet" href="/static/sign/js/jquery.iviewer.css"/>
    <style>
        html, body {
            height: 100%;
            padding: 0;
            margin: 0;
        }

        .viewer
        {
            height: 100%;
            position: relative;
            background-color: lightgreen;
        }

        .wrapper
        {
            border: 1px solid black;

            position: absolute;
            top: 5em;
            left: 1em;
            bottom: 1em;
            right: 1em;

            overflow: hidden; /*for opera*/
        }

        .toolbar
        {
            border: 1px solid black;
            position: absolute;
            top: 1em;
            left: 1em;
            right: 1em;
            height: 3em;
        }

    </style>
</head>
<body>
<div class="toolbar" style="line-height: 40px;">
    <span style="text-align: center;font-size: 16px;font-family: Arial;margin-left: 30px">放大或缩小后右键拖动地图,左键添加标记,添加完成即可关闭</span>
</div>
<div class="wrapper">
    <div id="viewer1" class="viewer iviewer_cursor" onclick="DisplayCoord(event)"></div>
    <br/>
</div>

<!-- script 开始 -->
<%--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>--%>
<%--<script type="text/javascript" src="/static/sign/js/jquery-1.11.1.min.js"></script>--%>
<script type="text/javascript" src="/static/sign/js/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="/static/sign/js/jquery.iviewer.js"></script>
<script type="text/javascript">
    function getX(obj){
        var parObj=obj;
        var left=obj.offsetLeft;
        while(parObj=parObj.offsetParent){
            left+=parObj.offsetLeft;
        }
        return left;
    }

    function getY(obj){
        var parObj=obj;
        var top=obj.offsetTop;
        while(parObj = parObj.offsetParent){
            top+=parObj.offsetTop;
        }
        return top;
    }

    function DisplayCoord(event){
        var top,left,oDiv;
        oDiv=document.getElementById("viewer1");
        top=getY(oDiv);
        left=getX(oDiv);
        var ml = ((event.clientX-left+document.body.scrollLeft)-2);
        var mt = ((event.clientY-top+document.body.scrollTop)-2);
        var m = new Array();
        m[0]=ml;
        m[1]=mt;
        return m;
    }
    var $ = jQuery;
    function isInCircle(x, y) {
        var relative_x = x - this.x;
        var relative_y = y - this.y;
        return Math.sqrt(relative_x*relative_x + relative_y*relative_y) <= this.r;
    }

    function isInRectangle(x, y) {
        return (this.x1 <= x && x <= this.x2) && (this.y1 <= y && y<= this.y2);
    }

    function getCircleCenter() { return {x: this.x, y: this.y}; }

    function getRectangleCenter() { return {x: (this.x2+this.x1)/2, y: (this.y2+this.y1)/2}; }

    var objects = [
        {x: 0, y: 0, r: 50000000000, isInObject: isInCircle, title: 'big circle', getCenter: getCircleCenter }
    ]

    function whereIam(x, y) {
        for (var i=0; i<objects.length; i++) {
            var obj = objects[i];
            if (obj.isInObject(x, y))
                return obj;
        }

        return null;
    }

    function showMe(a) {
        $.each(objects, function(i, object) {
            if (object.title == $(a).html()) {
                $("#viewer1").each(function(){
                    var center = object.getCenter();
                    var offset = this.iviewer.imageToContainer(center.x, center.y);
                    var containerOffset = this.iviewer.container.offset();
                    var pointer = $('#pointer');
                    console.log(containerOffset);
                    offset.x += containerOffset.left - 20;
                    offset.y += containerOffset.top - 40;
                    pointer.css('display', 'block');
                    pointer.css('left', offset.x+'px');
                    pointer.css('top', offset.y+'px');
                });
            }
        });
    }

    document.oncontextmenu = function(e){
        e.preventDefault();
    };//阻止鼠标右键默认事件
    $(function(){
        $("#viewer1").iviewer({
            src: "${src}",
            onClick: function(coords) {
                var object = whereIam(coords.x, coords.y);
                if (object)
                    $("#svg").remove();
                    /*alert('Clicked at ('+coords.x+', '+coords.y+')');*/
                $("#zonex").val(coords.x);
                $("#zoney").val(coords.y);
                var mar = DisplayCoord(event);
                for(var i=0;i<mar.length;i++)
                {
                    var CX = mar[0]-4;
                    var CY = mar[1]-4;
                }
                $("#viewer1").append("<div id='svg' style='margin-left:"+CX+"px;margin-top:"+CY+"px;position: absolute;z-index: 20170614;width:10px;height:10px;border:solid 1px red;border-radius: 50%;background-color: red' ></div> ");

            },
            onMouseMove: function(coords) {
                var object = whereIam(coords.x, coords.y);

                if (object) {
                    $('#status').html('You are in ('+coords.x.toFixed(1)+', '+coords.y.toFixed(1)+'). This is '+object.title);
                    this.container.css('cursor', 'crosshair');
                } else {
                    $('#status').html('You are in ('+coords.x.toFixed(1)+', '+coords.y.toFixed(1)+'). This is empty space');
                    this.container.css('cursor', null);
                }
            },

            onBeforeDrag: function(coords) {
                // remove pointer if image is getting moving
                // because it's not actual anymore
                $('#pointer').css('display', 'none');
                // forbid dragging when cursor is whithin the object
                return whereIam(coords.x, coords.y) ? false : true;
            },

            onZoom: function() {
                // remove pointer if image is resizing
                // because it's not actual anymore
                $('#pointer').css('display', 'none');
            },

            initCallback: function() {
                this.container.context.iviewer = this;
            }
        });
    });
</script>
<!-- script 结束 -->
</body>
</html>
